

<template>
  <div ref="example"></div>
  <!-- dialog -->
  <n-modal v-model:show="isShow">
    <n-card style="width: 600px" title="请选择标记类型" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <n-radio-group :on-update="handleTypeChange()" v-model:value="currentType" name="radiogroup">
        <n-space>
          <n-radio v-for="item in typeList" :key="item" :value="item.value">
            {{ item.name }}
          </n-radio>
        </n-space>
      </n-radio-group>
    </n-card>
  </n-modal>
</template>

<script>
import { ref, reactive, toRefs, onMounted, defineComponent } from 'vue'
import { Core } from '../../node_modules/@molar/annotator-core/dist/annotator-core.esm-bundler'
import txt from './assets/text/0000.txt?raw'
export default defineComponent({
  setup() {
    const example = ref('example')
    const isShow = ref(false)
    const state = reactive({
      currentType: '1',
      labelList: [],
      typeList: [
        {
          value: '1',
          name: '主语'
        },
        {
          value: '2',
          name: '谓语'
        },
        {
          value: '3',
          name: '宾语'
        },
      ]
    })
    let annotator, old = state.currentType
    let currentLabelNode
    let textSelectedCallback = new Function()
    onMounted(() => {
      initMolarAnnotator()
    })
    const handleTypeChange = () => {
      console.log(state.currentType)
      if (state.currentType != old) {
        setTimeout(() => {
          isShow.value = false
        }, 300)
        textSelectedCallback(state.currentType, currentLabelNode)
      }
      old = state.currentType
    }
    const initMolarAnnotator = () => {
      annotator = new Core(txt, example.value)
      annotator.on('textSelected', (startIndex, endIndex, callback, labelNode) => {
        textSelectedCallback = callback
        currentLabelNode = labelNode
        textSelectDialog()
      })
    }
    const textSelectDialog = () => {
      isShow.value = true
    }
    return {
      example,
      isShow,
      handleTypeChange,
      ...toRefs(state)
    }
  }
})
</script>